@charset "utf-8";
// @import "../base/conf";
$selectorHighlight: #eef6fe;
$primaryHoverColor: #0082ff !default; //主要
$formBorderColor: #c3cdd7 !default; //表单输入框色
$formBorderFocusColor: #3c96ff !default; //表单输入框激活色
$fnMainColor: #737987 !default; //主要颜色
$borderColor: #c3cdd7 !default; //边框色
$selectorZIndex: 100 !default; //下拉选框层

.bk-selector {
    position: relative;
    width: 100%;
    .bk-form-checkbox {
        padding: 0;
    }
    &.open {
        border-color: $formBorderFocusColor;
        .bk-selector-icon {
            transform: translateY(-50%) rotate(180deg);
        }
    }
    &-icon {
        cursor: pointer;
    }
    &-wrapper {
        position: relative;
        width: 100%;
    }
    &-input {
        width: 100%;
        height: 36px;
        line-height: 36px;
        padding: 0 10px;
        border: 1px solid $borderColor;
        border-radius: 2px;
        font-size: 14px;
        color: #666;
        outline: none;
        box-shadow: none;
        cursor: pointer;
        transition: border linear .2s;
        padding-right: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: #fff;
        &:hover {
            &:not([disabled="disabled"]) {
                border-color: $primaryHoverColor;
                + .bk-icon {
                    color: $primaryColor;
                }
            }
            // + .bk-icon {
            //     color: $primaryColor;
            // }
        }
        &.placeholder {
            color: $borderColor;
        }
        &.active {
            border-color: $primaryHoverColor !important;
            + .bk-icon {
                color: $primaryColor;
            }
        }
        &[disabled="disabled"] {
            color: #aaa;
            cursor: not-allowed;
            background: #fafafa;
        }
    }
    &-icon {
        position: absolute;
        top: 13px;
        right: 10px;
        font-size: 12px;
        transition: transform linear .2s;
        &.clear-icon {
            top: 10px;
            right: 7px;
            width: 18px;
            height: 18px;
            line-height: 18px;
            border-radius: 50%;
            background-color: #ddd;
            color: #fff;
            text-align: center;
            font-size: 12px;
            transition: backgroundColor linear .2s;
            &:hover {
                background-color: #ccc;
            }
            &:before {
                display: block;
                transform: scale(.7);
            }
        }
    }
    .bk-selector-list {
        position: absolute;
        top: 40px;
        left: 0;
        right: 0;
        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        z-index: $selectorZIndex;
        overflow-y: hidden;
        > ul {
            max-height: 160px;
            padding: 0;
            margin: 0;
            list-style: none;
            overflow-y: auto;
            &::-webkit-scrollbar {
                width: 6px;
                height: 5px;
            }
            &::-webkit-scrollbar-thumb {
                border-radius: 20px;
                background: #a5a5a5;
                -webkit-box-shadow: inset 0 0 6px hsla(0,0%,80%,.3);
            }
        }
        &-item {
            position: relative;
            width: 100%;
            border-left: $formBorderColor;
            border-right: $formBorderColor;
            background-color: #fff;
            cursor: pointer;
            &:first-child {
                border-top: $formBorderColor;
            }
            &:last-child {
                border-bottom: $formBorderColor;
            }
            &:hover,
            &.bk-selector-selected {
                background-color: $selectorHighlight;
                color: $primaryColor;
                .bk-selector-tools {
                    display: block;
                }
            }
            .text {
                padding: 0 10px;
                line-height: 42px;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .bk-selector-tools {
                position: absolute;
                display: none;
                top: 10px;
                right: 0;
                font-size: 12px;
                .bk-selector-list-icon {
                    margin-right: 14px;
                }
            }
        }
    }
    &-create-item {
        .text {
            text-align: left;
            color: $selectorHighlight;
            &:hover {
                color: #fff;
            }
        }
    }
    &-multi-label {
        display: block;
        line-height: 42px;
        cursor: pointer;
    }
    &-search-item {
        position: relative;
        border-bottom: 1px solid #e5e5e5;
        cursor: default;
        padding: 5px;
        &:hover {
            color: #666;
            background-color: #fff;
        }
        &>.bk-icon {
            position: absolute;
            right: 14px;
            top: 5px;
            height: 30px;
            line-height: 30px;
            color: #ccc;
        }
        &>input {
            width: 100%;
            height: 32px;
            line-height: 32px;
            padding: 10px;
            font-size: 14px;
            box-shadow: none;
            outline: none;
            background-color: #fafbfd;
            border: 1px solid #dde4eb;
            border-radius: 2px;
            color: $fnMainColor;
        }
    }
}

.bk-dropdown {
    position: relative;
    width: 100%;
    .bk-form-checkbox {
        padding: 0;
    }
    &.open {
        border-color: $formBorderFocusColor;
        .bk-dropdown-icon {
            transform: rotate(180deg);
        }
    }
    &-icon {
        cursor: pointer;
    }
    &-wrapper {
        position: relative;
        width: 100%;
    }

    &-selector {
        width: 100%;
        height: 36px;
        line-height: 36px;
        padding: 0 10px;
        border: 1px solid #ccc;
        border-radius: 2px;
        font-size: 14px;
        color: $fnMainColor;
        outline: none;
        box-shadow: none;
        cursor: pointer;
        transition: border linear .2s;
        &:hover {
            &:not([disabled="disabled"]) {
                border-color: $primaryHoverColor;
            }
        }
        &.placeholder {
            color: #ccc;
        }
        &.active {
            border-color: $primaryHoverColor !important;
        }
        &[disabled="disabled"] {
            color: #aaa;
            cursor: not-allowed;
            background: #fafafa;
        }
    }
    &-icon {
        position: absolute;
        top: 13px;
        right: 10px;
        font-size: 12px;
        color: #d3d3d3;
        transition: transform linear .2s;
        &.clear-icon {
            top: 10px;
            right: 7px;
            width: 18px;
            height: 18px;
            line-height: 18px;
            border-radius: 50%;
            background-color: #ddd;
            color: #fff;
            text-align: center;
            font-size: 12px;
            transition: backgroundColor linear .2s;
            &:hover {
                background-color: #ccc;
            }
            &:before {
                display: block;
                transform: scale(.7);
            }
        }
    }
    .bk-dropdown-list {
        position: absolute;
        top: 40px;
        left: 0;
        right: 0;
        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
        z-index: $selectorZIndex;
        max-height: 160px;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 6px;
            height: 5px;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 20px;
            background: #a5a5a5;
            -webkit-box-shadow: inset 0 0 6px hsla(0,0%,80%,.3);
        }
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        &-item {
            position: relative;
            width: 100%;
            border-left: $formBorderColor;
            border-right: $formBorderColor;
            background-color: #fff;
            cursor: pointer;
            &:first-child {
                border-top: $formBorderColor;
            }
            &:last-child {
                border-bottom: $formBorderColor;
            }
            &:hover,
            &.bk-dropdown-selected {
                background-color: $selectorHighlight;

                .bk-dropdown-tools {
                    display: block;
                }
            }
            .text {
                padding: 0 10px;
                line-height: 42px;
                font-size: 14px;
            }
            .bk-dropdown-tools {
                position: absolute;
                display: none;
                top: 10px;
                right: 0;
                font-size: 12px;
                .bk-selector-list-icon {
                    margin-right: 14px;
                }
            }
        }
    }
    &-create-item {
        .text {
            text-align: left;
            color: $selectorHighlight;
            &:hover {
                color: #fff;
            }
        }
    }
    &-multi-label {
        display: block;
        line-height: 42px;
        cursor: pointer;
    }
    &-search-item {
        position: relative;
        border-bottom: 1px solid #e5e5e5;
        cursor: default;
        height: 32px;
        &:hover {
            color: #666;
            background-color: #fff;
        }
        &>i {
            position: absolute;
            left: 10px;
            top: 0;
            height: 30px;
            line-height: 30px;
            color: #ccc;
        }
        &>input {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 30px;
            width: calc(100% - 30px);
            height: 30px;
            padding: 10px;
            font-size: 14px;
            border: none;
            box-shadow: none;
            outline: none;
            background-color: #fff;
            color: $fnMainColor;
        }
    }
}
